<template>
    <div>
    <ex-sort-table class="el-table-nowwarp" ref="userInfoGridPanelEl" :data="memberDataList" :showHeader="true" style="margin: 20px 0px 20px 0px; width: 50%;">
        <el-table-column prop="userName" label="姓名" min-width="10"></el-table-column>
        <el-table-column align="left" label="操作" width=36>
            <template slot-scope="scope">
                <button @mousedown.stop="" @mouseup="deleteMember(scope.$index)" style="border: none; background-color: #fff; cursor: pointer;" class="el-icon-close">
                </button>
            </template>
        </el-table-column>
    </ex-sort-table>

    <el-button @click="showSortResult()">获取排序结果</el-button>
    </div>
</template>
<script>
	

export default {
    data() {
        return {
            memberDataList: []
        };
    },
    mounted(){
        this.memberDataList = [
            { "userName": "张三" }, { "userName": "李四" }, { "userName": "王五" }, { "userName": "赵六" }, { "userName": "李元霸" }, { "userName": "宇文成都"
        }]
    },

    methods: {
      deleteMember(index){
        this.memberDataList.splice(index,1)
      },

      showSortResult(){
        let result = this.$refs['userInfoGridPanelEl'].getData().map(e=> e.userName)
        let str = result.join(', ')
        this.$message.success('排序结果: ' + str)
      }
    }

}
</script>